<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <div class="header">
      <div class="title">
        <div class="title-h" @click="back()">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="48"
                d="M328 112L184 256l144 144"
              />
            </svg>
          </div>
          <div class="txt-h">收钱</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <div class="content">
        <!-- 标题区域 -->
        <div class="content_title_panel">
          <div class="title-pp">
            <div class="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linejoin="round"
                  stroke-width="32"
                  d="M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224"
                />
                <path
                  d="M480 272v112a80 80 0 01-80 80h0a80 80 0 01-80-80v-48H48a15.86 15.86 0 00-16 16c0 64 6.74 112 80 112h288"
                  fill="none"
                  stroke="currentColor"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                  d="M224 144h192M288 224h128"
                />
              </svg>
            </div>
            <div class="content_title">个人收钱</div>
          </div>
        </div>
        <!-- 二维码区域 -->
        <div class="qrcode_panel">
          <div class="qrcode_title">扫一扫，向我付钱</div>
          <div class="qrcode">
            <Qrcode :qrUrlStr="myurl"></Qrcode>
          </div>
        </div>
        <!-- 其他功能 -->
        <div class="others_panel">
          <div class="txt">
            <div class="oleft">设置金额</div>
            <div class="oright">保存收款码</div>
          </div>
        </div>
        <!-- 记录 -->
        <div class="record_panel">
          <div class="record-pp">
            <div class="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <path
                  d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"
                  fill="none"
                  stroke="currentColor"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <path
                  d="M256 56v120a32 32 0 0032 32h120M176 288h160M176 368h160"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
              </svg>
            </div>
            <div class="record_txt">收款记录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_bottom"></div>    
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
import Qrcode from "@/components/Qrcode.vue";
export default {
  name: "createQrcode", //定义组件的名称
  components: {
    Qrcode,
  },
  data() {
    return {
      myurl: "我要传的地址",
      times: "",
    };
  },
  mounted() {
    this.createOrder();
  },
  methods: {
    async createOrder() {
      this.gettime();
      //console.log("请求后端");
      var data = await this.$http.post("getPayeeInfo", { times: this.times });
      //console.log(data);
      var usercode = "1";

      //运行时间戳，生成新链接
      this.myurl =
        "https://10.1.252.141:8443/fkx?uid=" + usercode + "&t=" + this.times;
    },
    gettime() {
      let time = parseInt(new Date().getTime() / 1000) + "";
      this.times = time;
    },
    back(){
      this.$router.push("/");
    }
  },
};
</script>
<style scoped>
/* 顶部搜索栏 */
.header {  
  background-color: #ff8f1f;
  color: #fff;
  width: 100%;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

/* 内容区域样式 */
.content_panel {
  background-color: #ff8f1f;
  /* height: 550px; */
  display: flex;
}

.content {
  margin: 10px;
  background-color: #ffffff;
  width: 100%;
  border-radius: 10px;
}

.content_title_panel {
  padding: 10px;
  color: #333333;
  font-size: 18px;
}

.title-pp {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #ccc;
  vertical-align: middle;
}

.content_title_panel .icon {
  width: 25px;
  height: 25px;
}

.content_title {
  padding: 10px 0;
  margin-left: 15px;
}

/* 二维码区域 */
.qrcode_panel {
  text-align: center;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode_panel .qrcode_title {
  color: #333333;
  padding: 20px 0;
}

/* 二维码弹性布局自动大小 */
.qrcode_panel .qrcode {
  background-color: #ccc;
  width: 250px;
  height: 250px;
}

/* 其他功能 */
.others_panel {
  color: #999999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 16px;
  text-align: center;
}

.txt {
  width: 250px;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

/* 记录 */
.record_panel {
  padding: 10px;
  color: #333333;
  font-size: 18px;
}

.record_panel .record-pp {
  display: flex;
  vertical-align: middle;
  border-top: solid 1px #ccc;
  padding: 15px 0;
}

.record_panel .icon {
  width: 25px;
  height: 25px;
}

.record_panel .record_txt {
  margin-left: 10px;
  width: 100%;
}

.content_bottom {
  height: 300px;
  background-color: #ff8f1f;
}
</style>
